<template>
  <div class="h-input" style="position: relative">
    <Input ref="input" v-model="userName" :placeholder="props.placeholder" :style="props.style" :class="props.class" :readonly="!props.editable"/>
    <i class="h-icon-close" v-if="userName" @click="clean"></i>
    <i class="h-icon-user" v-else  @click="showChooser"></i>
  </div>

  <Modal v-model="showChooseUser" :closeOnMask="false" title="用户选择" hasCloseIcon hasDivider>
    <div style="height: 400px;width:700px;display: flex;flex-direction: column;">
      <div class="query-bar" style="border-top:none;">
        <Input type="text" v-model="chooseTable.params.username" placeholder="用户名"/>
        <Input type="text" v-model="chooseTable.params.name" placeholder="姓名"/>
        <!--          <TreePicker :option="branchOption" v-model="chooseTable.params.branchSn" placeholder="所属机构" useConfirm-->
        <!--                      filterable></TreePicker>-->
        <CategoryPicker
            v-model="chooseTable.params.branchSn"
            :option="branchOpts"
            style="width:250px;display:inline-block;"
        />
        <!-- 工具条 -->
        <Button icon="h-icon-search" @click="chooseTable.load()" circle>查询</Button>
      </div>
      <div class="list" style="height: 310px;padding-bottom: 10px">
        <Table ref="table" :datas="chooseTable.data" :loading="chooseTable.loading">
          <TableItem title="序号" prop="$serial" :width="50"></TableItem>
          <TableItem title="用户名" prop="username"></TableItem>
          <TableItem title="姓名" prop="name"></TableItem>
          <TableItem title="机构" prop="branchSn" :format="formatBranch"></TableItem>
          <TableItem title="手机号" prop="phone" :width="120"></TableItem>
          <TableItem title="性别" prop="gender" dict="Gender" :width="50"></TableItem>
          <TableItem  :width="60">
            <template #default="{ data }">
              <span class="link" @click="choose(data)">选择</span>
            </template>
          </TableItem>
        </Table>
      </div>

      <div class="bar">
        <Pagination v-model="chooseTable.pagination" align="right" @change="chooseTable.load()"></Pagination>
      </div>
    </div>
  </Modal>
</template>

<script setup>
import {ref,reactive,onMounted,watch} from 'vue'
import {ajax,getBranches} from 'framework'
const emit = defineEmits(['update:modelValue','update:name','update:id','update:branchName','update:branch','change'])
const props=defineProps({
  placeholder:String,
  style:String,
  class:String,
  modelValue: String,
  name:String,
  editable:{
    type:Boolean,
    default:false
  }
})
const input=ref(null),showChooseUser=ref(false),submitting=ref(false),table=ref(null)
const chooseTable =  ajax.createDs('user/list', true)
const branchOpts=reactive({
  keyName: 'id',
  titleName: 'fullName',
  dataMode: 'tree',
  datas: []
})
const showValue=ref('')
const hasValue=ref('')
const userName=ref(props.name)
watch(()=>props.name,(v)=>{
  userName.value=v
})
watch(userName,(v)=>{
  emit('update:name',v)
})
const formatBranch=getBranches('mapper')
onMounted(()=>{
  branchOpts.datas=getBranches('tree')
})
function showChooser(){
  showChooseUser.value=true
  chooseTable.load()
}
function choose(dt){
  showChooseUser.value=false
  emit('update:id',dt.id)
  emit('update:modelValue',dt.username)
  emit('update:name',dt.name)
  emit('update:branch',dt.branch)
  emit('update:branchName',dt.branchName)
  emit('change',dt)
  userName.value=dt.name
}
function clean(){
  emit('update:id',null)
  emit('update:modelValue',null)
  emit('update:name',null)
  emit('update:branchName',null)
  emit('update:branch',null)
  emit('change',null)
  userName.value=''
}
</script>

<style scoped>
.h-input .h-icon-close,.h-input .h-icon-user{
  position: absolute;
  top: 50%;
  right: 8px;
  font-size: 12px;
  z-index: 3;
  cursor: pointer;
  transition: color .2s ease;
  color: #666;
}
</style>
